<template>
  <div class="new-workbench">
    <div class="info-box"> 
        <div class="info-box-child">
          <div class="news" :style="{height: video_height + 'px'}">
            <smsNews :style="{height: video_height - 10 + 'px'}"></smsNews>
          </div>
          <div class="customer-service-box" :style="{height: video_height + 'px'}">
            <customerService :style="{height: video_height - 20 + 'px'}"></customerService>
          </div>
        </div>
        <div ref='video' class="video-box" :style="{height: video_height + 'px'}">
           <OperationVideo :style="{height: video_height - 20 + 'px'}"></OperationVideo>
        </div>
    </div> 
    <div ref="functional" class="functional-areas">
      <el-row :gutter="10" >
        <el-col :span="12">
          <toDoList :tableHeight = "table_height"  :style="{height: functional_areas_height + 'px'}"></toDoList>
        </el-col>
        <el-col :span="12">
          <warningList :tableHeight = "table_height" :style="{height: functional_areas_height + 'px'}"></warningList>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import smsNews from '@/moduleComponents/newWorkbench/sms-news';
import smsNotice from '@/moduleComponents/newWorkbench/smsNotice';
// import customerService from '@/moduleComponents/newWorkbench/customerService';
import customerService from '@/moduleComponents/newWorkbench/customer-service';
// import operatioVideo from '@/moduleComponents/newWorkbench/operationVideo';
import OperationVideo from '@/moduleComponents/newWorkbench/operation-video';
import toDoList from '@/moduleComponents/newWorkbench/toDoList';
import warningList from '@/moduleComponents/newWorkbench/warningList';
export default {
  name: 'Newworkbench',
  components: {
    smsNotice,
    customerService,
    warningList,
    toDoList,
    smsNews,
    OperationVideo
  },
  data() {
    return {
      video_height: 386,
      functional_areas_height: 0,
      table_height: 0,
      element_height: 0
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.getDocumentHeight();
      this.setVideotHeight();
      this.setFunctionalAreasHeight();
      this.resize();
    },
    resize() {
      this.$nextTick(() => {
        var p = navigator.platform;
        let mac = p.indexOf('Mac') === 0;
        let x11 = p === 'X11' || p.indexOf('Linux') === 0;
        //判断当前系统
        if (p.indexOf('Win') === 0 || mac || x11) {
          //监听缩放
          window.addEventListener('resize', () => {
            this.getDocumentHeight();
            this.debounce(this.setVideotHeight(), 500);
            this.debounce(this.setFunctionalAreasHeight(), 500);
          });
          //监听页面加载
          window.addEventListener('load', () => {
            this.setFunctionalAreasHeight();
          });
        }
      });
    },

    // 设置视频高度
    setVideotHeight() {
      let video_width = this.getElementWidth('video');
      video_width > 466 ? video_width : 466;
      let video_height = video_width * 0.62;
      this.setElementHeight(video_height);
    },

    // 获取table高度
    getFunctionalAreasHeight() {
      let functional_areas_height =
        this.element_height - this.video_height - 140;
      return functional_areas_height;
    },

    //设置代办模块和预警模块高度
    setFunctionalAreasHeight() {
      let functional_areas_height = this.getFunctionalAreasHeight();
      this.functional_areas_height =
        functional_areas_height > 360 ? functional_areas_height : 360;
      this.setTableHeight(this.functional_areas_height);
    },

    // 设置元素高度
    setElementHeight(elementHeight) {
      this.video_height = elementHeight + 48;
    },

    // 设置table高度
    setTableHeight(functional_areas_height) {
      this.$nextTick(() => {
        this.table_height = functional_areas_height - 120;
      });
    },

    // 获取元素宽度
    getElementWidth(refName) {
      return this.$refs[refName].offsetWidth;
    },

    // 获取浏览器高度
    getDocumentHeight() {
      this.element_height = `${document.documentElement.clientHeight}`;
    },

    debounce(fn, delay) {
      let timeout = null;
      return function(e) {
        clearTimeout(timeout);
        timeout = setTimeout(() => {
          fn.apply(this, arguments);
        }, delay);
      };
    }
  }
};
</script>

<style scoped lang="less">
.gutter-bar {
  height: 8px;
  background: #f0f2f5;
}
.new-workbench {
  margin: 0 !important;
  position: unset !important;
  background-color: #f4f7fa !important;
  padding: 10px 5px;
  .functional-areas {
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    overflow: hidden;
    min-width: 1100px;
  }
  .info-box {
    display: flex;
    padding: 0;
    margin: 0;
    min-width: 1100px;
    // overflow: hidden;
    border-radius: 6px;
    margin-bottom: 10px;
  }
  .info-box-child {
    display: flex;
    background-color: #f4f7fa;
    flex-grow: 1;
    margin-right: 10px;
  }
  .video-box {
    width: 32.24%;
    overflow: hidden;
    border-radius: 6px;
    background-color: #fff;
  }
  .customer-service-box {
    height: 100%;
    overflow: hidden;
    background-color: #fff;
    border-radius: 6px;
    width: 43%;
    flex-grow: 1;
  }
  .news {
    width: 57%;
    margin-right: 10px;
    height: 100%;
    overflow: hidden;
    background-color: #fff;
    border-radius: 6px;
    flex-grow: 1;
  }

  .sms-notice {
    width: 100%;
  }
  @media screen and (width: 1440px) {
    .video-box {
      width: 466px;
    }
    .news {
      width: 377px;
    }
    .customer-service-box {
      width: 355px;
    }
  }
  @media screen and (width: 1920px) {
    .video-box {
      width: 620px;
    }
    .news {
      width: 554px;
    }
    .customer-service-box {
      width: 512px;
    }
  }
}
</style>
